<script>
import {getState} from "@/api/task";

export default {
  name: "RunningTask",
  data() {
    return {
      tasks: []
    }
  },
  mounted() {
    getState().then(res =>{
      this.tasks = res
    })
  }
}
</script>

<template>
  <div class="task_wrapper">
    <div class="task" v-for="(task) in tasks" :key="task.taskId">
      <div class="task_index">
        {{task.taskId}}
      </div>
      <div style="margin-left: 120px">
        电梯惊魂-第一集
      </div>
      <div style="position: absolute; right: 20px; top: 0; color: #42b983">
        80%
      </div>
    </div>
  </div>
</template>

<style scoped>
.task{
  position: relative;
  border-top: 1px solid whitesmoke;
  border-bottom: 1px solid whitesmoke;
  height: 40px;
  line-height: 40px;
}
.task_index{
  position: absolute;
  display: inline-block;
  width: 100px;
  text-align: center;
  background-color: whitesmoke;
}
</style>